<template>
  <div>
    <!-- 输入框 -->
    <el-input
        style="width:50%;margin-bottom: 10px"
        placeholder="请根据姓名或昵称输入搜索内容"
        v-model="pagination.queryString"
        @change="search"
        clearable>
    </el-input>
    <el-button @click="DriverList()" class="dalfBut">查询</el-button>


    <!-- 数据单向绑定  :data表格数据 -->
    <el-table :data="dataList" border>
      <!-- prop属性  与此处数据的属性一致 -->
      <el-table-column prop="name"   label="姓名" width="120" ></el-table-column>
      <el-table-column prop="loginName"   label="昵称" width="120" ></el-table-column>
      <el-table-column prop="sex" label="性别" width="85" ></el-table-column>
      <el-table-column prop="age"    label="年龄" width="85" ></el-table-column>
      <el-table-column prop="phonenumber" label="电话" width="200" ></el-table-column>
      <el-table-column prop="entryDay" label="入职日期" width="200" ></el-table-column>
      <el-table-column prop="workarea" label="地址" width="200" ></el-table-column>
      <!--<el-table-column label="操作" width="100">
          <template slot-scope="scope">
              <el-button type="primary" size="small" icon="el-icon-edit"   circle @click="update(scope.row.id)" ></el-button>
              <el-button type="danger"  size="small" icon="el-icon-delete" circle @click="del(scope.row.id)" ></el-button>
          </template>
      </el-table-column>-->
    </el-table>

    <!-- 分页  :属性="" 单向数据绑定 -->
    <el-pagination
        class="pagiantion"
        @current-change="DriverList"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>


  </div>
</template>

<script>
export default {
  name: "AdminView.vue",
  data() {
    return {
      pagination: {       //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 4,    //每页显示的记录数
        total: 0,        //总记录数
        queryString: ""//查询条件
      },
      dataList:[]
    }
  },
  created() {
    this.DriverList()
  },
  methods: {
    //若没有传递当前页码 ， 默认展示第一页
    DriverList(page = 1) {
      this.pagination.currentPage = page
      let param = {
        currentPage: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        queryString: this.pagination.queryString
      }
      axios.get('http://localhost:8099/driver/findPage', {params: param})
          .then(response => {  //response.data.data 等价于 Map 有PageInfo&query
            console.log(response)
            this.pagination.total = response.data.total
            this.dataList = response.data.records
          })
          .catch(error => {
            console.log(error)
          })
    },
    search(){
      this.DriverList()
    }
  }
}
</script>

<style scoped>

</style>